<script setup lang='ts'>
import queryIDStore from "@/store/queryIDStore";
import userStore from "@/store/userStore"
import  utils from "@/utils/index"

// import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import search from "@/apis/searchApi"
import { nextTick, onMounted, ref } from "vue";
import searchApi from "@/apis/searchApi";
import { use } from "echarts";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import searchStore from "@/store/searchStore"
import { html } from "dom7";
const imageUrl = ref('')

const show=ref(false)
const activeName = ref("site");

const userInfo=ref()

userInfo.value=userStore().info
nextTick(()=>{
    document.documentElement.addEventListener("click",()=>{
        show.value=false  //还要阻止点击事件的冒泡
    })
})


//存储访问的uid
const storeUserIid=(u_id:any)=>{
    queryIDStore().setQueryUid(u_id)
   
}
const dialog = ref(false)



//搜索框
const state = ref('')

interface LinkItem {
  bid: string
  title: string,
  author: string, 
  avatar: string,
  comments:string,
  goods:string,
  views:string,
  time:string,
}

const links = ref<LinkItem[] | undefined>([])




let timeout: NodeJS.Timeout
const querySearchAsync = async(queryString: string, cb: (arg: any) => void) => {
  console.log("object");

 const text=  (await (searchApi.search(queryString)))
    if(text.code=200){

      links.value=text.data
      clearTimeout(timeout)
  timeout = setTimeout(() => {
  cb(links.value)
  }, 3000 * Math.random())
  
    }

  }


  const router=useRouter()
  const route =useRoute()
  const searchstore=searchStore()
//先用点击的方式来跳转
const handleSelect = (item: LinkItem) => {

  // //点击之后直接跳转
  console.log("点击了");
  // console.log(item)
const data =JSON.stringify(links.value)
searchstore.searchinfo=data
  router.push(`/blogger/content/search`)
  sessionStorage.setItem("search","flash");
  if(route.path=="/blogger/content/search"){
     router.go(0)
  }
}


//回车事件
const changeEv=async() => {
  console.log("回车了: "+state.value);
    // console.log(item)
   const data1 =(await search.search(state.value)).data
   console.log(data1);
   
   const data =JSON.stringify(data1)
searchstore.searchinfo=data
  router.push(`/blogger/content/search`)
  sessionStorage.setItem("search","flash");
  if(route.path=="/blogger/content/search"){
     router.go(0)
  }
}
</script>
<template>

     <div class=" w-full md:w-screen   h-auto flex justify-between  items-center  ">
          <div class="  text-center  flex justify-center items-center  ">
            <h1 class="font-extrabold leading-11 text-[30px] text-red-700">
                <router-link :to="{name:'home'}">
                  🌈 学易网
                </router-link>
            </h1>
   
          </div>

          <!-- 搜索框 -->
          <div>
            <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearchAsync"
    placeholder="欢迎搜索..."
    :trigger-on-focus="false"
    @select="handleSelect"
    :suffix-icon="Search"
    :clearable="true"
    value-key="author"
    @change="changeEv"
  />
          </div>
     <div class="   md:mr-20 flex justify-center items-center">
       <!-- TODO 写站类消息 -->
      <div class=" mr-5 md:mr-12 mt-2 notification">
        <icon-remind theme="outline" size="24" fill="#6a1990" @click.stop="show=!show"/>
        <el-tabs v-model="activeName" class="lists" v-show="show" @click.stop>
      <el-tab-pane label="系统消息" name="site" >
    
         <p>无消息</p>

      </el-tab-pane>
      <el-tab-pane label="站内通知" name="message">
           <p>无消息</p>
      </el-tab-pane>
    </el-tabs>
      </div>
          <el-dropdown class="!w-auto">
          <img :src="userInfo?.avatar" 
            class="   md:mr-0    w-9 h-9 object-cover
    rounded-full">
        
<template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item >
         <icon-home theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
          <router-link :to="{name:'home'}">网站首页</router-link>
          </el-dropdown-item>
        <el-dropdown-item>
     
                 <icon-people-safe theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
                 <!-- "`/blogger/content/selfInfo/post?u_id=${userInfo.id}`" -->
                      <router-link @click="storeUserIid(userInfo?.id)"
                       :to="`/blogger/content/selfInfo/post?u_id=${userInfo?.id}`">个人主页 </router-link>

          </el-dropdown-item>

        <el-dropdown-item>
          
                 <icon-file-code theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
         
                  <router-link :to="{path:'/class'}">文档资料</router-link>
                </el-dropdown-item>

          
          <el-dropdown-item   @click="dialog = true">
            <icon-avatar theme="outline" size="24" fill="#f15215" class=" mr-2 text-xl"/>
                 更换头像
          </el-dropdown-item>


        <el-dropdown-item divided  @click="utils.user.logout()">
                          <icon-logout theme="outline" size="24" fill="#19e7a6" class=" mr-2 text-xl"/>
            退出登录
          </el-dropdown-item>
      </el-dropdown-menu>
    </template>
   </el-dropdown>
   <p class="ml-2 text-sm mt-2">{{userInfo?.name}}</p>
     </div>
     </div>
     <el-drawer
    ref="drawerRef"
    v-model="dialog"
    :with-header="false"
    size="40%"
    direction="rtl"
    custom-class="demo-drawer"
  >
  <div>
    <h1 class="text-violet-400 text-[30px]">请选择你要更换的头像</h1>
   
  </div>
  </el-drawer>
</template>
<style scoped lang='scss'>
    
    @media screen and (max-width:768px) {
        
 }

 .notification {
  @apply relative ;
  .lists {
    @apply absolute bg-white p-3 border rounded-md 
      shadow-md right-[-60px] z-20 w-[200px] text-sm;
      a{
        @apply  truncate  block  hover:text-fuchsia-700
      }
    
  }
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;

}

</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>